
<html>
<head>
  <meta charset="UTF-8">
  <!-- import CSS -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
<div id="app">
  <el-row>
    <el-col :span="6">
      <el-card>
        <div v-for="o in 4"  >
          {{'列表内容 ' + o }}
        </div>
      </el-card>
    </el-col>
    <el-col :span="6">
      <el-card>
        <div v-for="o in 4"  >
          {{'列表内容 ' + o }}
        </div>
      </el-card>
    </el-col>
    <el-col :span="6">
      <el-card>
        <div v-for="o in 4"  >
          {{'列表内容 ' + o }}
        </div>
      </el-card>
    </el-col>
    <el-col :span="6">
      <el-card>
        <div v-for="o in 4"  >
          {{'列表内容 ' + o }}
        </div>
      </el-card>
    </el-col>
  </el-row>

<h1>图片卡片</h1>

<el-row  gutter="20" style="width: 1200px; margin:0 auto">
  <el-col :span="8" v-for="(o, index) in 3">
    <el-card :body-style="{ padding: '10px' }">
      <img src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png" class="image">
      <div style="padding: 14px;">
        <span>好吃的汉堡</span>
        <div class="bottom clearfix">
          <time class="time">{{ new Date()}}</time>
          <el-button type="text" class="button">操作按钮</el-button>
        </div>
      </div>
    </el-card>
  </el-col>
</el-row>
</div>
</body>
<!-- import Vue before Element -->
<script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/2.6.14/vue.min.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
  new Vue({
    el: '#app',
    data: function() {
      return {

      }
    }
  })
</script>
</html>


